<template>
  <div class="loading_container" v-show="showMask">
    <van-overlay
      :show="showMask"
      z-index="9999"
      :custom-style="{ background: 'rgba(255,255,255,0)' }"
    >
      <div class="wrapper">
        <div class="wrapper_div">
          <img
            src="@/assets/img/rent/ic_checkmark@2x.png"
            alt=""
            style="width: 42px;height: 30px;"
          />
          <div class="wrapper_title"><slot></slot>{{ title }}</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: 'dialog-rent',
  props: {
    title: {
      type: String,
      default: ''
    },
    showMask: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.loading_container {
  width: 100%;
  height: 100vh;
  z-index: 9999;
  position: absolute;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 9999;
    .wrapper_div {
      width: calc(100% - 154px);
      opacity: 0.7;
      background: #000000;
      border-radius: 10px;
      padding: 28px 28px 16px;
      text-align: center;
      .wrapper_title {
        margin-top: 12px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        line-height: 16px;
      }
    }
  }
}
</style>
